<template>
  <div class="score-level">
    <div class="item" v-for="item in list" :key="item.id">
      <div class="text">{{ item.title }}</div>
      <div class="color" :style="{ backgroundColor: item.color }"></div>
      <div class="score">{{ item.score }}</div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { scoreLevelList } from '@/utils/enum'
const list = reactive(scoreLevelList)
</script>

<style lang="less" scoped>
@import url(../style/score-level.less);
</style>
